<template>
  <div :class="['btn_wrapper',isActive?'':'disabled']" @click="isActive?btnClickEvent():''">
    <div v-if="!isCustumer" class="btn_inner">{{text}}</div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'comBtn',
  props: {
    text: {
      default: '确定'
    },
    isActive: {
      type: Boolean,
      default: true
    },
    isCustumer: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  methods: {
    btnClickEvent: function () {
      this.$emit('click')
    }
  }
}
</script>
<style scoped>
.btn_wrapper {
  cursor: pointer;
  border-radius: 8px;
  text-align: center;
  color: white;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn_inner {
  width: 635px;
  background-image: linear-gradient(-1deg, #ff9900 0%, #ffb72a 97%);
  border-radius: 100px;
  padding: 18px 0;
  font-size: 32px;
  color: #fff;
}
.btn_icon {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  position: absolute;
  right: -6px;
  top: -6px;
}
.disabled {
  opacity: 0.6;
}
</style>
